<template>
    <view class="index home-bg" :style="[navBackground]">
        <!-- <web-view src="https://php-hszl.yixiangonline.com/mobile"></web-view> -->
        <!-- #ifdef H5 -->
        <download-nav v-if="isShowDownload"></download-nav>
        <!-- #endif -->

        <!-- #ifdef MP-ALIPAY -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
                :border-bottom="false"
                :is-fixed="false"
                custom-class="home-bg"
                :background="navBackground"
                :is-back="false"
            >
                <view class="row logo-wrap" v-show="navBg < 1 && showLogo" style="width: 100%">
                    <!-- <image :src="logo" mode="heightFix" class="logo ml30" /> -->
                    <!-- <image :src="logo" mode="widthFix" class="logo ml30" height="52rpx" /> -->
                    <u-image
                        :src="logo"
                        mode="heightFix"
                        class="logo"
                        height="52rpx"
                        :show-loading="false"
                        :show-error="false"
                    />
                </view>
                <view class="row nav-search" v-show="navSearch" style="width: 100%">
                    <navigator hover-class="none" url="/bundle/pages/message_center/message_center">
                        <image class="icon-md ml30" src="/static/images/icon_news.png" />
                    </navigator>
                    <navigator
                        class="ml20 flex1 mr20"
                        hover-class="none"
                        url="/pages/goods_search/goods_search"
                    >
                        <u-search
                            wrap-bg-color="transparent"
                            :bg-color="'#fff'"
                            :disabled="true"
                            :height="62"
                        >
                        </u-search>
                    </navigator>
                </view>
            </u-navbar>
        </u-sticky>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
                :border-bottom="false"
                :is-fixed="false"
                custom-class="home-bg"
                :background="navBackground"
                :is-back="false"
            >
                <view class="row logo-wrap flex1" v-show="navBg < 1 && showLogo">
                    <image :src="logo" mode="heightFix" class="logo" />
                    <!-- <image :src="logo" mode="aspectFit" class="logo ml30" /> -->
                </view>
                <view class="flex1 row nav-search" v-show="navSearch">
                    <navigator
                        hover-class="none"
                        @click="goPage('/bundle/pages/message_center/message_center')"
                    >
                        <image class="icon-md ml30" src="/static/images/icon_news.png" />
                    </navigator>
                    <navigator
                        class="ml20 flex1 mr20"
                        hover-class="none"
                        url="/pages/goods_search/goods_search"
                    >
                        <u-search
                            wrap-bg-color="transparent"
                            :bg-color="'#fff'"
                            :disabled="true"
                            :height="62"
                        >
                        </u-search>
                    </navigator>
                </view>
            </u-navbar>
        </u-sticky>
        <!-- #endif -->

        <view class="flex1 row" v-if="showLogo">
            <navigator hover-class="none" url="/bundle/pages/message_center/message_center">
                <image class="icon-md ml30" src="/static/images/icon_news.png" />
            </navigator>
            <navigator
                class="ml20 flex1 mr20"
                hover-class="none"
                url="/pages/goods_search/goods_search"
            >
                <u-search
                    wrap-bg-color="transparent"
                    :bg-color="'#fff'"
                    :disabled="true"
                    :height="62"
                ></u-search>
            </navigator>
        </view>

        <view class="contain">
            <view class="main">
                <bubble-tips top="50rpx" :discharge="isDischarge" />
                <swipers :pid="1" height="322rpx" padding="20rpx 0"></swipers>
                <!-- 导航入口 -->
                <view class="nav bg-white" v-if="navList.length">
                    <swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
                        <swiper-item v-for="(items, index) in navList" :key="index">
                            <view class="nav-list row wrap">
                                <view
                                    v-for="(item, index2) in items"
                                    :key="index2"
                                    @tap="tapMenu(item)"
                                    class="nav-item column-center"
                                >
                                    <image class="nav-icon" :src="item.image"></image>
                                    <view class="name xs">{{ item.name }}</view>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                    <view class="dots" v-if="navList.length > 1">
                        <view
                            v-for="(item, index) in navList"
                            :key="index"
                            :class="'dot ' + (index == currentSwiper ? 'active' : '')"
                        ></view>
                    </view>
                </view>

                <!-- 资讯 -->
                <navigator
                    v-if="news.length"
                    class="information bg-white row mt20"
                    hover-class="none"
                    open-type="navigate"
                    url="/pages/news_list/news_list"
                >
                    <image class="icon-toutiao" src="/static/images/icon_toutiao.png" />
                    <text class="gap-line"></text>
                    <view class="news flex1">
                        <view class="shade"></view>
                        <swiper
                            autoplay="true"
                            style="height: 76rpx; flex: 1"
                            vertical="true"
                            circular="true"
                            :interval="3 * 1000"
                        >
                            <swiper-item v-for="(item, index) in news" :key="index" class="row">
                                <view class="flexnone">
                                    <u-tag
                                        v-if="item.is_new"
                                        shape="circle"
                                        text="最新"
                                        size="mini"
                                        type="primary"
                                        mode="plain"
                                    />
                                </view>
                                <view class="text-swiper ml10 line1">{{ item.title }}</view>
                            </swiper-item>
                        </swiper>
                    </view>
                    <image class="icon-sm ml20" src="/static/images/arrow_right.png" />
                </navigator>

                <!-- 广告位 -->
                <swipers :is-swiper="false" :pid="23" height="170rpx" padding="20rpx 0 0"></swipers>

                <!-- 活动专区 -->
                <view class="special-area mt20">
                    <view>
                        <scroll-view style="white-space: nowrap" :scroll-x="true">
                            <navigator
                                class="item bg-white"
                                v-for="(item, index) in activityArea"
                                :key="index"
                                hover-class="none"
                                :url="`/bundle/pages/activity_detail/activity_detail?id=${item.id}&name=${item.title}&title=${item.name}`"
                            >
                                <view class="con column-center">
                                    <custom-image
                                        width="300rpx"
                                        height="300rpx"
                                        :src="item.image"
                                    ></custom-image>
                                    <view class="title xxl">{{ item.name }}</view>
                                    <view class="desc primary xxs line1">{{ item.title }}</view>
                                </view>
                            </navigator>
                        </scroll-view>
                    </view>
                </view>

                <!-- 热销 -->
                <view class="hot mt20" v-if="hotGoods.length && seting.hots">
                    <active-area type="hot" progressBarColor="#9912FE" :lists="hotGoods">
                        <navigator
                            slot="header"
                            hover-class="none"
                            class="row activity-header"
                            open-type="navigate"
                            url="/bundle/pages/hot_list/hot_list"
                        >
                            <view class="row title flex1">
                                <image
                                    class="title-image"
                                    mode="widthFix"
                                    src="/static/images/hot_title.png"
                                ></image>
                                <view class="ml20 muted xs">热销火爆商品</view>
                            </view>
                            <view class="row xs">
                                更多
                                <u-icon name="arrow-right" size="28"></u-icon>
                            </view>
                        </navigator>
                    </active-area>
                </view>

                <!-- 新品推荐 -->
                <view v-if="newGoods.length && seting.news" class="new-goods">
                    <active-area type="news" progressBarColor="#9912FE" :lists="newGoods">
                        <navigator
                            slot="header"
                            hover-class="none"
                            class="row activity-header"
                            open-type="navigate"
                            url=""
                        >
                            <view class="row title flex1">
                                <image
                                    class="title-image"
                                    mode="widthFix"
                                    src="/static/images/new_title.png"
                                ></image>
                                <view class="ml20 muted xs">最新发布商品 抢先体验</view>
                            </view>
                            <!-- 					<view class="row xs">
								更多
								<u-icon name="arrow-right" size="28"></u-icon>
							</view> -->
                        </navigator>
                    </active-area>
                </view>
            </view>

            <!-- 好物优选 -->
            <view style="display: none;" class="goods mt20" v-if="goodsList.length">
                <view class="goods-title row-center">
                    <text class="line"></text>
                    <view class="row">
                        <image
                            class="mr10 icon"
                            mode="widthFix"
                            src="/static/images/icon_like.png"
                        ></image>
                        <text class="bold xxl">好物优选</text>
                    </view>
                    <text class="line"></text>
                </view>
                <goods-list :list="goodsList"></goods-list>
                <loading-footer :status="status"></loading-footer>
            </view>
			
			
			<view class="goods mt20" v-if="leaseGoods.length">
			    <view class="goods-title row-center">
			        <text class="line"></text>
			        <view class="row">
			            <image
			                class="mr10 icon"
			                mode="widthFix"
			                src="/static/images/icon_like.png"
			            ></image>
			            <text class="bold xxl">好物优选</text>
			        </view>
			        <text class="line"></text>
			    </view>
			    <goods-list type="lease" :list="leaseGoods"></goods-list>
			    <loading-footer :status="status"></loading-footer>
			</view>
			
			
			<view class="copyright">
				<view class="copyright-name">{{copyright.copyright_info}}</view>
				<!-- #ifdef H5 -->
				<a class="copyright-link" :href="copyright.icp_link">{{copyright.icp_number}}</a>
				<!-- #endif -->
				
				<!-- #ifdef MP -->
				<view class="copyright-link">{{copyright.icp_number}}</view>
				<!-- #endif -->
			</view>
        </view>

        <!-- 购物车  浮动按钮 -->
        <navigator open-type="navigate" hover-class="none" url="/pages/shop_cart/shop_cart">
            <view class="cart-tap">
                <u-icon name="shopping-cart" />
            </view>
        </navigator>

        <!-- #ifdef APP-PLUS -->
        <lyg-popup
            v-if="appConfig.app_agreement"
            title="服务协议和隐私政策"
            protocolPath="/bundle/pages/server_explan/server_explan?type=0"
            policyPath="/bundle/pages/server_explan/server_explan?type=1"
            policyStorageKey="has_read_privacy"
        >
        </lyg-popup>
        <!-- #endif -->
    </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getHome, getMenu, getBestList } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingFun, menuJump, arraySlice, setTabbar, getRect } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import {getLeaseGoodsList} from '@/api/lease.js'
const app = getApp()
export default {
    data() {
        return {
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
            remainTime: '',
            navBg: 0,
            navList: [],
            news: [],
            goodsList: [],
            seckill: {},
            seckillGoods: [],
            hotGoods: [],
            newGoods: [],
			leaseGoods:[],
            activityArea: [],
            showCoupop: false,
            isDischarge: true,
            enable: true,
            isShowDownload: false,
			copyright:{}
        }
    },
    async onLoad(options) {
        this.headerAction = wx.createAnimation({
            delay: 0,
            duration: 100,
            timingFunction: 'ease-in-out'
        })

        setTabbar()
        this.navHeight = app.globalData.navHeight
        this.isDischarge = false
        await this.getMenuFun()
        this.getBestListFun()
	    this.copyright = this.appConfig;
		console.log(this.copyright.icp_link)
        console.log(this.appConfig)
        // #ifdef H5
        if (options && options.isapp == 1) {
            this.isShowDownload = true
        }
        // #endif
    },
    async onShow() {
        this.$nextTick(function () {
            getRect('.index').then((res) => {
                if (res.top == 0) {
                    this.navBg = 0
                }
            })
        })

        // #ifdef H5
        this.enable = true
        // #endif
        await this.getHomeFun()
        await this.getCartNum()
		console.log(this.appConfig);
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
        this.getBestListFun()
    },
    onPullDownRefresh() {
        this.getHomeFun()
        this.getMenuFun()
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_bg
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
    },
    destroyed() {
        this.isDischarge = true
    },
    methods: {
        ...mapActions(['getCartNum']),
        async getHomeFun() {
            const { code, data } = await getHome()
            uni.stopPullDownRefresh()
            if (code == 1) {
                const { news, seckill = {}, host_goods, shop_logo, new_goods, activity_area } = data
                this.remainTime = Math.abs(seckill.end_time - Date.parse(new Date()) / 1000)
                this.logo = shop_logo
                this.news = news
                this.seckillGoods = seckill.goods
                this.seckill = seckill
                this.hotGoods = host_goods
                this.newGoods = new_goods
                this.activityArea = activity_area
            }
        },
        async getMenuFun() {
            const { code, data } = await getMenu({
                type: 1
            })
            uni.stopPullDownRefresh()
            if (code == 1) {
                //   截取数组
                if (data.length <= 5) {
                    this.navSwiperH = 200
                } else {
                    this.navSwiperH = 374
                }
                this.navList = arraySlice(data)
            }
        },
        async getBestListFun() {
            // let { page, goodsList, status } = this
            // const data = await loadingFun(getBestList, page, goodsList, status)
            // if (!data) return
            // this.page = data.page
            // this.goodsList = data.dataList
            // this.status = data.status
			
			let { page, leaseGoods, status } = this
			let param = {};
			param.page_size = 10;
			const data = await loadingFun(getLeaseGoodsList, page, leaseGoods, status,param)
			if (!data) return
			this.page = data.page
			this.leaseGoods = data.dataList
			this.status = data.status
        },
        async tapMenu(item) {
            if (!this.isLogin) return toLogin()
            menuJump(item)
        },
        goPage(url) {
            if (!this.isLogin) return toLogin()
            uni.navigateTo({
                url
            })
        },
        swiperChange(e) {
            this.currentSwiper = e.detail.current
        }
    },
    computed: {
        ...mapGetters(['cartNum', 'inviteCode', 'appConfig']),
        navBackground() {
            return this.seting.top_bg_image
                ? {
                      'background-image': `url(${this.seting.top_bg_image})`
                  }
                : {}
        },
        showLogo() {
            return this.seting.logo
        },
        navSearch() {
            if (this.showLogo === 0) return true

            return this.navBg < 1 ? false : true
        },
        seting() {
            const { index_setting } = this.appConfig
            return index_setting
        }
    }
}
</script>

<style lang="scss">
// #ifdef H5
::v-deep .home-bg {
    // background: url(../../static/images/bg_hometop.png) no-repeat;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

// #endif
.home-bg {
    background-repeat: no-repeat;
    // background: url(../../static/images/bg_hometop.png) no-repeat;
    background-size: 100% auto;
}

.index {
    background-size: 100% auto;

    .logo-wrap {
        position: absolute;
        padding: 0 30rpx;

        .logo {
            width: auto;
            height: 52rpx;
        }
    }

    .header {
        .navigation-bar {
            padding-top: var(--status-bar-height);
            box-sizing: border-box;
        }
    }

    .contain {
        .main {
            position: relative;
            z-index: 9;
            padding: 0 20rpx;

            .nav {
                position: relative;
                border-radius: 14rpx;
                // #ifdef MP-ALIPAY
                padding-bottom: 40rpx;
                // #endif

                .nav-item {
                    width: 20%;
                    margin-top: 30rpx;

                    .nav-icon {
                        width: 82rpx;
                        height: 82rpx;
                        margin-bottom: 15rpx;
                    }
                }

                .dots {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 20rpx;
                    display: flex;

                    .dot {
                        width: 10rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        margin-right: 10rpx;
                        background-color: rgba(255, 44, 60, 0.4);

                        &.active {
                            width: 20rpx;
                            background-color: $-color-primary;
                        }
                    }
                }
            }

            .information {
                height: 76rpx;
                box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
                padding: 0 20rpx;
                box-sizing: border-box;
                border-radius: 14rpx;

                .news {
                    position: relative;

                    .shade {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 100;
                    }
                }

                .icon-toutiao {
                    width: 114rpx;
                    height: 34rpx;
                }

                .gap-line {
                    height: 28rpx;
                    width: 1px;
                    background-color: #dcdddc;
                    margin: 0 30rpx;
                }
            }

            .special-area {
                .item {
                    width: 300rpx;
                    border-radius: 20rpx;
                    display: inline-block;
                    overflow: hidden;
                    margin-right: 20rpx;
                    padding-bottom: 25rpx;

                    .title {
                        padding: 10rpx 0;
                    }

                    .desc {
                        background-color: #e0eef7;
                        padding: 6rpx 20rpx;
                        border-radius: 60rpx;
                        max-width: 260rpx;
                    }
                }
            }

            .activity-header {
                height: 90rpx;
                padding: 0 20rpx;
            }

            .seckill {
                .dec {
                    background-color: #fffbdb;
                    width: 150rpx;
                }
            }

            .hot,
            .new-goods {
                .title-image {
                    width: 144rpx;
                    height: 55rpx;
                }
            }
        }

        .goods {
            .goods-title {
                height: 100rpx;

                .line {
                    width: 58rpx;
                    height: 1px;
                    background-color: #ccc;
                    margin: 0 22rpx;
                }

                .icon {
                    width: 38rpx;
                    height: 38rpx;
                }
            }
        }
    }

    .cart-tap {
        position: fixed;
        z-index: 99;
        bottom: 220rpx;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
        font-size: 44rpx;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.6);
    }
	.copyright{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		.copyright-name{
			margin-bottom: 20upx;
		}
		.copyright-link{
			padding-bottom: 20upx;
		}
		
	}
}
</style>
